<template>
    <div>
        <!--封装菜单树组件-->
        <template v-for="menu in this.menus">
            <el-submenu v-if="menu.children" :index="menu.router" :key="menu.id">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span>{{menu.name}}</span>
                </template>
                <menu-tree :menus="menu.children"></menu-tree>
            </el-submenu>
            <el-menu-item :index="menu.router" :key="menu.id" @click="saveCurrentPath(menu.router, menu.name)" v-else>
                <i :class="menu.icon"></i>
                <span slot="title">{{menu.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>

    export default {
        props: ['menus'],
        name: 'MenuTree',
        methods: {
            saveCurrentPath(menuRouter, menuName) {
                this.$store.state.breadcrumbList.set(menuRouter, menuName);
            }
        }
    }
</script>